<ion-header>

    <ion-navbar>
        <ion-title style="text-align:center">{{'text-mnemonic-check' | translate}}</ion-title>
    </ion-navbar>

</ion-header>
<ion-content>
    <div class="mnemonic-write">

        <div class="slide-container">
            <div class="slide-body">
                <div class="slide-title">{{'text-mnemonic-prompt2' | translate}}</div>
                <div class="phrase-container">
                    <div class="phrase">
                        <button ion-button outline *ngFor="let item of selectList; let i = index" (click)="removeButton(i,item)" style="text-transform: none">{{item.text}}</button>
                    </div>
                </div>
            </div>

            <div class="bottom-phrase">
                <div *ngIf="!selectComplete">
                    <div class="words">
                        <button ion-button outline *ngFor="let item of mnemonicList; let i = index" (click)="addButton(i, item)" [disabled]="item.selected" style="text-transform: none">{{item.text}}
                    </button>
                    </div>
                </div>
            </div>
        </div>


        <div *ngIf="selectComplete" class="bottom-absolute">
            <button ion-button full class="button-standard" (click)="onNext()">
            {{ 'confirm' | translate }}
          </button>
        </div>
    </div>
</ion-content>